<template>
	<view class="container">
		<!-- 状态栏占位 -->
		<!--<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view> -->

		<!-- 自定义导航栏 -->
		<!--    <view class="custom-nav">
      <view class="nav-content">
        <view class="city-select" @tap="showCityPicker">
          <text>{{ currentCity }}</text>
          <text class="icon-arrow">▼</text>
        </view>
       <view class="search-box" @tap="goToSearch">
          <text class="icon-search">🔍</text>
          <text class="search-placeholder">搜索影片、影院</text>
        </view> 
      </view>
    </view> -->

		<!-- 页面主体内容 -->
		<scroll-view scroll-y='true' class="page-content" :refresher-enabled="true" :refresher-triggered="isRefreshing"
			@refresherrefresh="onRefresherRefresh">
			<!-- 轮播图 -->
			<swiper class="banner-swiper" circular autoplay interval="3000" duration="500" indicator-dots="true"
				indicator-active-color="#fff">
				<swiper-item v-for="(item, index) in bannerList" :key="index">
					<image class="banner-image" :src="item.image" mode="aspectFill" />
				</swiper-item>
			</swiper>

			<!-- 常用快捷入口 -->
			<view class="quick-entry">
				<view class="entry-title">快捷入口</view>
				<view class="entry-content">
					<view class="entry-item" @tap="goToOrders">
						<view class="item-left">
							<text class="item-title">订单</text>
							<text class="item-desc">查看取票码</text>
						</view>
						<view class="item-right">
							<button class="check-btn">查看</button>
						</view>
					</view>
					<view class="entry-item" @tap="goToCoupons">
						<view class="item-left">
							<text class="item-title">影院</text>
							<text class="item-desc">查找影院</text>
						</view>
						<view class="item-right">
							<button class="check-btn">查看</button>
						</view>
					</view>
					<view class="entry-item bg-entry-item" @tap="goCode">
						<view class="item-left">
							<text class="item-title">卡券</text>
							<text class="item-desc">查看优惠券</text>
						</view>
						<view class="item-right">
							<button class="check-btn">查看</button>
						</view>
					</view>
				</view>
			</view>

			<!-- 正在热映 -->
			<view class="movie-section">
				<view class="section-header">
					<text class="section-title">正在热映</text>
					<text class="more-link" @tap="goToMore('hot')">全部 ></text>
				</view>
				<scroll-view scroll-x class="movie-list">
					<view class="movie-item" v-for="(item, index) in hotMovies" :key="index" @tap="goToDetail(item,1)">
						<image class="movie-poster" :src="item.poster" mode="aspectFill" />
						<view class="movie-info">
							<text class="movie-name">{{ item.name }}</text>
							<text class="movie-score">{{ item.score }}分</text>
						</view>
						<button :style="{backgroundColor:t('color1')}" class="buy-btn">购票</button>
					</view>
				</scroll-view>
			</view>

			<!-- 即将上映 -->
			<view class="movie-section">
				<view class="section-header">
					<text class="section-title">即将上映</text>
					<text class="more-link" @tap="goToMore('coming')">全部 ></text>
				</view>
				<scroll-view scroll-x class="movie-list">
					<view class="movie-item" v-for="(item, index) in comingMovies" :key="index"
						@tap="goToDetail(item,2)">
						<image class="movie-poster" :src="item.poster" mode="aspectFill" />
						<view class="movie-info">
							<text class="movie-name">{{ item.name }}</text>
							<text class="movie-score">{{ item.score }}分</text>
						</view>
						<button class="presale-btn">预售</button>
					</view>
				</scroll-view>
			</view>
		</scroll-view>
		<loading v-if="loading"></loading>
	</view>
</template>

<script>
	var app = getApp();
	export default {
		data() {
			return {
				loading: false,
				isload: false,
				statusBarHeight: 20,
				currentCity: '北京',
				defaultImage: 'https://p0.pipi.cn/mediaplus/friday_image_fe/0fa33452b7877e6e385c29d5e0c83aa04902b.jpg?imageView2/1/w/160/h/220',
				bannerList: [
					// { image: 'https://p0.pipi.cn/mediaplus/friday_image_fe/0fa33452b7877e6e385c29d5e0c83aa04902b.jpg?imageView2/1/w/160/h/220' },
					// { image: 'https://p0.pipi.cn/mediaplus/friday_image_fe/0fa33452b7877e6e385c29d5e0c83aa04902b.jpg?imageView2/1/w/160/h/220' },
					// { image: 'https://p0.pipi.cn/mediaplus/friday_image_fe/0fa33452b7877e6e385c29d5e0c83aa04902b.jpg?imageView2/1/w/160/h/220' }
				],
				hotMovies: [
					// { id: 1, name: '误杀3', score: '9.0', poster: 'https://p0.pipi.cn/mediaplus/friday_image_fe/0fa33452b7877e6e385c29d5e0c83aa04902b.jpg?imageView2/1/w/160/h/220' },
					// { id: 2, name: '年会不能停年会不能停年会不能停', score: '9.4', poster: 'https://p0.pipi.cn/mediaplus/friday_image_fe/0fa33452b7877e6e385c29d5e0c83aa04902b.jpg?imageView2/1/w/160/h/220' },
					// { id: 3, name: '小小的我', score: '9.2', poster: 'https://p0.pipi.cn/mediaplus/friday_image_fe/0fa33452b7877e6e385c29d5e0c83aa04902b.jpg?imageView2/1/w/160/h/220' },
					// { id: 4, name: '刺猬索尼克', score: '9.4', poster: 'https://p0.pipi.cn/mediaplus/friday_image_fe/0fa33452b7877e6e385c29d5e0c83aa04902b.jpg?imageView2/1/w/160/h/220' }
				],
				comingMovies: [
					// { id: 5, name: '哪吒之魔童降世', score: '8.7', poster: 'https://p0.pipi.cn/mediaplus/friday_image_fe/0fa33452b7877e6e385c29d5e0c83aa04902b.jpg?imageView2/1/w/160/h/220' },
					// { id: 6, name: '蚁人与黄蜂女', score: '8.9', poster: 'https://p0.pipi.cn/mediaplus/friday_image_fe/0fa33452b7877e6e385c29d5e0c83aa04902b.jpg?imageView2/1/w/160/h/220' },
					// { id: 7, name: '熊出没·重返地球', score: '9.2', poster: 'https://p0.pipi.cn/mediaplus/friday_image_fe/0fa33452b7877e6e385c29d5e0c83aa04902b.jpg?imageView2/1/w/160/h/220' },
					// { id: 8, name: '封神第一部', score: '9.0', poster: 'https://p0.pipi.cn/mediaplus/friday_image_fe/0fa33452b7877e6e385c29d5e0c83aa04902b.jpg?imageView2/1/w/160/h/220' }
				],
				isRefreshing: false // 控制刷新状态
			}
		},
		onLoad() {
			// 获取状态栏高度
			//this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			this.getdata();
			uni.getLocation({
				type: 'wgs84', // 使用 wgs84 坐标系
				success: (res) => {
					const latitude = res.latitude; // 纬度
					const longitude = res.longitude; // 经度
					// 获取经纬度并更新数据
					uni.setStorageSync('latitude', latitude)
					uni.setStorageSync('longitude', longitude)
					this.getAreaByLocation(latitude,longitude)
				},
				fail: (err) => {
					// 获取位置失败
					console.log('获取位置失败:', err);

				}
			});
		},

		onPullDownRefresh: function(e) {
			this.getdata();
		},

		onPageScroll: function(e) {
			uni.$emit('onPageScroll', e);
		},

		methods: {
			onRefresherRefresh() {
				this.isRefreshing = true; // 开始刷新
				this.getdata(); // 加载数据
			},
			getdata() {
				let that = this;
				that.loading = true;
				app.showLoading('加载中');
				app.get('film/index_data', {}, function(res) {
					that.loading = false;
					//that.isload = false;		
					if (res && res.status == 200) {
						that.bannerList = res.data.bannerList;
						that.hotMovies = res.data.hotMovies;
						that.comingMovies = res.data.comingMovies;
					} else {
						app.error("数据加载错误：" + res.msg)
					}
					//that.loaded();
					that.isRefreshing = false; // 结束刷新
					that.loaded();
					app.showLoading(false);
				});
			},
			getAreaByLocation(latitude,longitude){
				app.get('address/getAreaByLocation', {
					latitude:latitude,
					longitude:longitude,
					type:0,
				}, (res) => {
					if(res.status == 1){
						const result = res;
						const city = `${result.province}/${result.city}/${result.district}`
						uni.setStorageSync('latitude', latitude)
						uni.setStorageSync('longitude', longitude)
						uni.setStorageSync('city', city)
						uni.setStorageSync('cityName', result.city)
						uni.setStorageSync('areaName', result.district)
						
					}else{
						app.error(res.msg)
					}
					
				});
			},
			showCityPicker() {
				// 显示城市选择器
				uni.showToast({
					title: '选择城市',
					icon: 'none'
				})
			},
			goToSearch() {
				uni.showToast({
					title: '搜索功能',
					icon: 'none'
				})
			},
			goToOrders() {
				uni.navigateTo({
					url: '/pagesZone/movie/order_list'
				})
			},
			goToCoupons() {
				uni.navigateTo({
					url: '/pagesZone/movie/movie?active=1'
					//url: '/pagesZone/movie/cinema-detail?cinemaId=44002781'
				})
			},
			goCode(){
				uni.navigateTo({
					url: '/pagesExt/paycoupon/paycoupon'
				})
			},
			goToDetail(movie, type) {
				uni.navigateTo({
					url: '/pagesZone/movie/movie_detail?filmId=' + movie.id + '&filmName=' + movie.name +
						'&type=' + type
				})
			},

			goToMore(type) {
				let route = ''
				switch (type) {
					case "hot":
						route = '/pagesZone/movie/movie?active=0'
						break;
					case "coming":
						route = '/pagesZone/movie/movie?active=2'
						break;
					default:
						route = '/pagesZone/movie/movie?active=1'
						break;
				}
				uni.navigateTo({
					url: route
				})
			},


		}
	}
</script>

<style lang="scss">
	.container {
		min-height: 100vh;
		background-color: #f5f5f5;
	}

	.status-bar {
		background-color: #ba1f25;
	}

	.custom-nav {
		background-color: #ba1f25;
		padding: 10rpx 20rpx;

		.nav-content {
			display: flex;
			align-items: center;
			height: 88rpx;

			.city-select {
				display: flex;
				align-items: center;
				color: #fff;
				font-size: 32rpx;
				margin-right: 20rpx;

				.icon-arrow {
					font-size: 24rpx;
					margin-left: 6rpx;
				}
			}

			.search-box {
				flex: 1;
				height: 64rpx;
				background: rgba(255, 255, 255, 0.2);
				border-radius: 32rpx;
				display: flex;
				align-items: center;
				padding: 0 24rpx;

				.icon-search {
					margin-right: 10rpx;
				}

				.search-placeholder {
					color: rgba(255, 255, 255, 0.8);
					font-size: 28rpx;
				}
			}
		}
	}

	.page-content {
		//height: calc(100vh - 88rpx);
		height: 100vh;
	}

	.banner-swiper {
		width: 100%;
		height: 360rpx;

		.banner-image {
			width: 100%;
			height: 100%;
		}
	}

	.quick-entry {
		margin: 20rpx;
		background: #fff;
		border-radius: 12rpx;
		padding: 20rpx;

		.entry-title {
			font-size: 28rpx;
			color: #333;
			margin-bottom: 20rpx;
		}

		.entry-content {
			display: flex;
			justify-content: space-between;
			gap: 12rpx;

			.entry-item {
				flex: 1;
				background: #fff5f6;
				border-radius: 8rpx;
				padding: 12rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.item-left {
					display: flex;
					flex-direction: column;

					.item-title {
						font-size: 28rpx;
						color: #333;
						margin-bottom: 8rpx;
					}

					.item-desc {
						font-size: 24rpx;
						color: #999;
					}
				}

				.item-right {
					.check-btn {
						font-size: 24rpx;
						color: #ff4d4f;
						background: transparent;
						padding: 0;
						line-height: 1;
						border: none;

						&::after {
							border: none;
						}
					}
				}
			}
			
		}
	}

	.movie-section {
		margin: 20rpx;
		background: #fff;
		border-radius: 12rpx;
		padding: 20rpx;

		.section-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;

			.section-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
			}

			.more-link {
				font-size: 24rpx;
				color: #999;
			}
		}

		.movie-list {
			white-space: nowrap;

			.movie-item {
				display: inline-block;
				width: 200rpx;
				margin-right: 20rpx;

				.movie-poster {
					width: 200rpx;
					height: 280rpx;
					border-radius: 8rpx;
				}

				.movie-info {
					margin: 10rpx 0;

					.movie-name {
						font-size: 26rpx;
						color: #333;
						display: block;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.movie-score {
						font-size: 24rpx;
						color: #ba1f25;
					}
				}

				.buy-btn,
				.presale-btn {
					width: 100%;
					height: 60rpx;
					line-height: 60rpx;
					font-size: 26rpx;
					border-radius: 30rpx;
					border: none;
				}

				.buy-btn {
					background: #ba1f25;
					color: #fff;
				}

				.presale-btn {
					background: #4a90e2;
					color: #fff;
				}
			}
		}
	}
	
</style>